<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Mobile first web app theme | first</title>
  <meta name="description" content="mobile first, app, web app, responsive, admin dashboard, flat, flat ui">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/font-awesome.min.css">
  <link rel="stylesheet" href="css/style.css">
  <!--[if lt IE 9]>
    <script src="js/ie/respond.min.js"></script>
    <script src="js/ie/html5.js"></script>
  <![endif]-->
</head>
<body>
  <!-- header -->
  <header id="header" class="navbar">    
    <ul class="nav navbar-nav navbar-avatar pull-right">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">            
          <span class="hidden-sm-only">Mika Sokeil</span>
          <span class="thumb-small avatar inline"><img src="images/avatar.jpg" alt="Mika Sokeil" class="img-circle"></span>
          <b class="caret hidden-sm-only"></b>
        </a>
        <ul class="dropdown-menu">
          <li><a href="#">Settings</a></li>
          <li><a href="#">Profile</a></li>
          <li><a href="#"><span class="badge bg-danger pull-right">3</span>Notifications</a></li>
          <li class="divider"></li>
          <li><a href="docs.html">Help</a></li>
          <li><a href="signin.html">Logout</a></li>
        </ul>
      </li>
    </ul>
    <a class="navbar-brand" href="#">first</a>
    <button type="button" class="btn btn-link pull-left nav-toggle hidden-lg" data-toggle="class:show" data-target="#nav">
      <i class="icon-reorder icon-xlarge text-default"></i>
    </button>
    <ul class="nav navbar-nav hidden-sm">
      <li>
        <div class="m-t m-b-small" id="panel-notifications">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-comment-alt icon-xlarge text-default"></i><b class="badge badge-notes bg-danger count-n">2</b></a>
          <section class="dropdown-menu m-l-small m-t-mini">
            <section class="panel panel-large arrow arrow-top">
              <header class="panel-heading bg-white"><span class="h5"><strong>You have <span class="count-n">2</span> notifications</strong></span></header>
              <div class="list-group list-group-flush m-t-n">
                <a href="#" class="media list-group-item">
                  <span class="pull-left thumb-small"><img src="images/avatar.jpg" alt="John said" class="img-circle"></span>
                  <span class="media-body block m-b-none">
                    Moved to Bootstrap 3.0<br>
                    <small class="text-muted">23 June 13</small>
                  </span>
                </a>
                <a href="#" class="media list-group-item">
                  <span class="media-body block m-b-none">
                    first v.1 (Bootstrap 2.3 based) released<br>
                    <small class="text-muted">19 June 13</small>
                  </span>
                </a>
              </div>
              <footer class="panel-footer text-small">
                <a href="#" class="pull-right"><i class="icon-cog"></i></a>
                <a href="#">See all the notifications</a>
              </footer>
            </section>
          </section>
        </div>
      </li>
      <li><div class="m-t-small"><a class="btn btn-small btn-info" data-toggle="modal" href="#modal"><i class="icon-plus"></i> POST</a></div></li>
      <li class="dropdown shift" data-toggle="shift:appendTo" data-target=".nav-primary .nav">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-cog icon-xlarge visible-sm visible-sm-inline"></i>Settings <b class="caret hidden-sm-only"></b></a>
        <ul class="dropdown-menu">
          <li>
            <a href="#" data-toggle="class:navbar-fixed" data-target='body'>Navbar 
              <span class="text-active">auto</span>
              <span class="text">fixed</span>
            </a>
          </li>
          <li class="visible-lg">
            <a href="#" data-toggle="class:nav-vertical" data-target="#nav">Nav 
              <span class="text-active">vertical</span>
              <span class="text">horizontal</span>
            </a>
          </li>
          <li class="divider hidden-sm"></li>
          <li class="dropdown-header">Colors</li>
          <li>
            <a href="#" data-toggle="class:bg bg-black" data-target='.navbar'>Navbar 
              <span class="text-active">white</span>
              <span class="text">inverse</span>
            </a>
          </li>
          <li>
            <a href="#" data-toggle="class:bg-light" data-target='#nav'>Nav 
              <span class="text-active">inverse</span>
              <span class="text">light</span>
            </a>
          </li>
        </ul>
      </li>
    </ul>
    <form class="navbar-form pull-left shift" action="" data-toggle="shift:appendTo" data-target=".nav-primary">
      <i class="icon-search text-muted"></i>
      <input type="text" class="input-small form-control" placeholder="Search">
    </form>
  </header>
  <!-- / header -->
  <!-- nav -->
  <nav id="nav" class="nav-primary visible-lg nav-vertical">
    <ul class="nav" data-spy="affix" data-offset-top="50">
      <li><a href="index.html"><i class="icon-dashboard icon-xlarge"></i>Dashboard</a></li>
      <li class="active"><a href="mail.html"><b class="badge bg-danger pull-right">5</b><i class="icon-envelope-alt icon-xlarge"></i>Mail</a></li>
      <li class="dropdown-submenu">
        <a href="#"><i class="icon-th icon-xlarge"></i>Elements</a>
        <ul class="dropdown-menu">
          <li><a href="buttons.html">Buttons</a></li>
          <li><a href="icons.html"><b class="badge pull-right">302</b>Icons</a></li>            
          <li><a href="grid.html">Grid</a></li>
          <li><a href="widgets.html"><b class="badge bg-primary pull-right">8</b>Widgets</a></li>
          <li><a href="components.html"><b class="badge pull-right">18</b>Components</a></li>
        </ul>
      </li>
      <li class="dropdown-submenu">
        <a href="#"><i class="icon-list icon-xlarge"></i>Lists</a>
        <ul class="dropdown-menu">
          <li><a href="list.html">List groups</a></li>
          <li><a href="table.html">Table</a></li>
        </ul>
      </li>
      <li><a href="form.html"><i class="icon-edit icon-xlarge"></i>Form</a></li>
      <li><a href="chart.html"><i class="icon-signal icon-xlarge"></i>Chart</a></li>
      <li class="dropdown-submenu">
        <a href="#"><i class="icon-link icon-xlarge"></i>Others</a>
        <ul class="dropdown-menu">
          <li><a href="signin.html">Signin page</a></li>
          <li><a href="signup.html">Signup page</a></li>
          <li><a href="404.html">404 page</a></li>
        </ul>
      </li>
    </ul>
  </nav>
  <!-- / nav -->
  <section id="content" class="content-sidebar bg-white">
    <!-- .sidebar -->
    <aside class="sidebar bg-lighter sidebar-small">
      <div class="text-center clearfix bg-white"><button class="btn btn-small btn-danger m-t m-b"><i class="icon-edit"></i> Compose</button></div>
      <div class="list-group list-normal m-b-none">
        <a href="#" class="list-group-item active"><i class="icon-inbox"></i><span class="badge m-r">201</span> Inbox</a>
        <a href="#" class="list-group-item"><i class="icon-envelope-alt"></i>Sent mail</a>
        <a href="#" class="list-group-item"><i class="icon-star-empty"></i><span class="badge m-r">3</span>Starred</a>
        <a href="#" class="list-group-item"><i class="icon-bookmark-empty"></i><span class="badge m-r">4</span> Important</a>
        <a href="#" class="list-group-item"><i class="icon-pencil"></i>Draft</a>
        <a href="#" class="list-group-item"><i class="icon-trash"></i>Trash</a>
        <a href="#" class="list-group-item"><i class="icon-user"></i><span class="badge m-r">23</span> Contacts</a>
      </div>
    </aside>
    <!-- /.sidebar -->
    <!-- .sidebar -->
    <aside class="sidebar sidebar-large">
      <div class="padder header-bar bg clearfix">
        <div class="btn-group m-t pull-right">
          <button type="button" class="btn btn-small btn-white"><i class="icon-chevron-left"></i></button>
          <button type="button" class="btn btn-small btn-white"><i class="icon-chevron-right"></i></button>
        </div>
        <div class="btn-group m-t m-b">
          <button class="btn btn-white btn-small dropdown-toggle" data-toggle="dropdown">Filter <span class="caret"></span></button>
          <ul class="dropdown-menu text-left text-small">
            <li><a href="#">Read</a></li>
            <li><a href="#">Unread</a></li>
            <li><a href="#">Starred</a></li>
            <li><a href="#">Unstarred</a></li>
          </ul>
        </div>
        <button class="btn btn-small btn-white" data-toggle="tooltip" data-title="Refresh"><i class="icon-refresh"></i></button>
      </div>
      <div class="list-group list-normal m-t-n-xmini scroll-y scrollbar" style="max-height:400px">
        <a href="#" class="list-group-item"><small class="pull-right text-muted">3 minuts ago</small><strong>Foxe Ohil</strong><br><small>Vestibulum ullamcorper sodales nisi nec...</small></a>
        <a href="#" class="list-group-item bg"><small class="pull-right text-muted">1 hour ago</small><strong>Sophi Soke</strong><br><small>Morbi nec nunc condimentum...</small></a>
        <a href="#" class="list-group-item"><small class="pull-right text-muted">2 hours ago</small><strong>Foxe Ohil</strong><br><small>Vestibulum ullamcorper sodales nisi nec...</small></a>
        <a href="#" class="list-group-item"><small class="pull-right text-muted">1 day ago</small><strong>Sophi Soke</strong><br><small>Morbi nec nunc condimentum...</small></a>
        <a href="#" class="list-group-item active"><small class="pull-right text-muted">3 days ago</small><strong>Mika Sokeil</strong><br><small>Mobile first web app for startup...</small></a>
        <a href="#" class="list-group-item bg"><small class="pull-right text-muted">Jun 21</small><strong>Sophi Soke</strong><br><small>Morbi nec nunc condimentum...</small></a>
        <a href="#" class="list-group-item"><small class="pull-right text-muted">May 10</small><strong>Foxe Ohil</strong><br><small>Vestibulum ullamcorper sodales nisi nec...</small></a>
        <a href="#" class="list-group-item bg"><small class="pull-right text-muted">Jan 2</small><strong>Sophi Soke</strong><br><small>Morbi nec nunc condimentum...</small></a>
      </div>
    </aside>
    <!-- /.sidebar -->
    <!-- .main -->
    <section class="main">
      <div class="bg-primary clearfix padder m-b">
        <h3 class="m-b">Mobile first web app for startup</h3>
      </div>
      <div class="text-small padder">
        <div class="block clearfix">
          <a href="#" class="thumb-mini inline"><img src="images/avatar.jpg" class="img-circle"></a> Mika Sokeil
          &lt;mica_sokeil@gmail.com&gt; to me
          <div class="pull-right inline">May 12 (<em>4 days ago</em>) 
            <a href="#" data-toggle="class"><i class="icon-star-empty text-muted icon-large text"></i><i class="icon-star text-warning icon-large text-active"></i></a>
            <div class="btn-group">
              <button class="btn btn-white btn-mini" data-toggle="tooltip" data-title="Reply"><i class="icon-reply"></i></button>
              <button class="btn btn-white btn-mini dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
              <ul class="dropdown-menu pull-right">
                <li><a href="#"><i class="icon-reply"></i> Reply</a></li>
                <li><a href="#"><i class="icon-signout"></i> Forward</a></li>
                <li><a href="#">Add Mika Sokeil to contact list</a></li>
                <li><a href="#">Mark as unread</a></li>
                <li class="divider"></li>
                <li><a href="#">Delete this message</a></li>
                <li><a href="#">Report spam</a></li>
              </ul>
            </div>
          </div>
        </div>
        <p>Mr. Soe</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Aliquam sollicitudin venenatis ipsum ac feugiat. Vestibulum ullamcorper sodales nisi nec condimentum. Mauris convallis mauris at pellentesque volutpat. Phasellus at ultricies neque, quis malesuada augue. Donec eleifend condimentum nisl eu consectetur. Integer eleifend, nisl venenatis consequat iaculis, lectus arcu malesuada sem, dapibus porta quam lacus eu neque.</p>
        <blockquote>
          <em>Morbi nec nunc condimentum, egestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae elementum ligula. Nunc placerat purus quam, ac adipiscing arcu rutrum eu. Vestibulum adipiscing ut augue ut auctor. Vestibulum nec lorem imperdiet nibh mollis gravida ut a justo.<br><br>
          Suspendisse arcu nulla, mollis sed eros id, pellentesque vulputate nulla. Nullam lectus dolor, pulvinar eu tristique nec, tempus ut ligula. Quisque pulvinar ut justo id dapibus. Duis convallis tellus faucibus nisl fermentum, nec semper massa adipiscing. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In vestibulum est vel elementum pellentesque.</em>
        </blockquote>
        <p>Duis non malesuada est, quis congue nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
        <p>Best Regards<br>Mical</p>
      </div>
      <div class="padder">
        <form class="panel text-small">
          <div>Click here to <a href="#">Reply</a> or <a href="#">Forward</a></div>
        </form>
      </div>
    </section>
    <!-- /.main -->
    <!-- .sidebar -->
    <aside class="sidebar bg text-small">
      <ul class="list-group list-normal m-b">
        <li class="list-group-item">
          <div class="media">
            <span class="pull-left thumb-small"><img src="images/avatar.jpg" alt="John said" class="img-circle"></span>
            <div class="pull-right text-success m-t-small">
              <i class="icon-circle"></i>
            </div>
            <div class="media-body">
              <div><a href="#" class="h5">Chris Fox</a></div>
              <small class="text-muted">2 minutes ago</small>
            </div>
          </div>
        </li>
        <li class="list-group-item">
          <div class="media">
            <span class="pull-left thumb-small"><img src="images/avatar.jpg" alt="John said" class="img-circle"></span>
            <div class="pull-right text-success m-t-small">
              <i class="icon-circle"></i>
            </div>
            <div class="media-body">
              <div><a href="#" class="h5">Amanda Col</a></div>
              <small class="text-muted">2 hours ago</small>
            </div>
          </div>
        </li>
        <li class="list-group-item">
          <div class="media">
            <span class="pull-left thumb-small"><img src="images/avatar.jpg" alt="John said" class="img-circle"></span>
            <div class="pull-right text-warning m-t-small">
              <i class="icon-circle"></i>
            </div>
            <div class="media-body">
              <div><a href="#" class="h5">Dan Doorack</a></div>
              <small class="text-muted">3 days ago</small>
            </div>
          </div>
        </li>
        <li class="list-group-item">
          <div class="media">
            <span class="pull-left thumb-small"><img src="images/avatar.jpg" alt="John said" class="img-circle"></span>
            <div class="pull-right text-danger m-t-small">
              <i class="icon-circle"></i>
            </div>
            <div class="media-body">
              <div><a href="#" class="h5">Lauren Taylor</a></div>
              <small class="text-muted">2 minutes ago</small>
            </div>
          </div>
        </li>
      </ul>
      <p class="text-center m-b"><a class="btn btn-success btn-small" href="#"><i class="icon-plus"></i>New Contact</a></p>
    </aside>
    <!-- /.sidebar -->
  </section>
  <!-- footer -->
  <footer id="footer">
    <div class="text-center padder clearfix">
      <p>
        <small>&copy; first 2013, Mobile first web app framework base on Bootstrap</small><br><br>
        <a href="#" class="btn btn-mini btn-circle btn-twitter"><i class="icon-twitter"></i></a>
        <a href="#" class="btn btn-mini btn-circle btn-facebook"><i class="icon-facebook"></i></a>
        <a href="#" class="btn btn-mini btn-circle btn-gplus"><i class="icon-google-plus"></i></a>
      </p>
    </div>
  </footer>
  <!-- / footer -->
	<script src="js/jquery.min.js"></script>
  <!-- Bootstrap -->
  <script src="js/bootstrap.js"></script>
  <!-- app -->
  <script src="js/app.js"></script>
  <script src="js/app.plugin.js"></script>
  <script src="js/app.data.js"></script>  
  <!-- Sparkline Chart -->
  <script src="js/charts/sparkline/jquery.sparkline.min.js"></script>
  <!-- Easy Pie Chart -->
  <script src="js/charts/easypiechart/jquery.easy-pie-chart.js"></script>
</body>
</html>